<template>
    <div id="page">
        <img src="./assets/images/m1.png" alt="water" id="img">
        <canvas id="canvas" width="300" height="100"></canvas>
        <p style="margin-top:10px; text-align:center;"><a href="" id="btn" download>下载</a></p>
        <router-view></router-view>
    </div>
</template>

<script type="text/javascript">

export default {
    name: 'app',
    mounted(){
        const img = document.querySelector('#img');
        const canvas = document.querySelector('#canvas');
        const btn = document.querySelector('#btn');
        const ctx = canvas.getContext("2d");
        console.log('canvas',canvas);
        img.onload = () => {
            ctx.drawImage(img,0,0,300,100);
            ctx.font="58px";
            ctx.fillStyle = "#fff";
            ctx.fillText('hell word',50, 50);
            btn.href=canvas.toDataURL();
        }
    }
}
</script>

<style lang="scss">
@import 'assets/sass/tool.scss';
#page {
    height: 100%;
}
</style>
